<template>
  <div class="goods-detail">
    <my-header titleName="商品详情"></my-header>
    <!-- 2 渲染轮播图 -->
    <swiper :list="goodsSwipe" loop auto height="300px" dots-position="center">
    </swiper>
    <!-- 1. 渲染商品价格及描述 -->
    <div>
      <h4 class="goods-title">{{goodsInfo.title}}</h4>
      <p class="goods-price">
        <span class="market-price">￥{{goodsInfo.market_price}}</span>
        <span class="sell-price">￥{{goodsInfo.sell_price}}</span>
      </p>
    </div>
    <div class="goods-info">
      <h4 class="goods-desc">商品参数</h4>
      <p>商品编号:{{goodsInfo.goods_no}}</p>
      <p>库存:{{goodsInfo.stock_quantity}}</p>
      <p>上架时间:{{goodsInfo.add_time}}</p>
    </div>
    <!-- 3. @click 绑定事件不生效,在组件上绑定原生点击事件请使用@click.native -->
    <x-button type="primary" @click.native="JumpTo('goodsdesc')">图文介绍</x-button>
    <x-button type="warn" @click.native="JumpTo('goodscomment')">商品评论</x-button>
    <div class="goods-footer">
      <div class="goods-footer-item contact"><span class="iconfont icon-kefu"></span><span>联系客服</span></div>
      <div class="goods-footer-item cart">
        <span class="iconfont icon-gouwuche"></span>
        <span>购物车</span>
        <span class="badge">{{cartNum}}</span>
      </div>
      <div class="goods-footer-item add">
        <span @click="addCart">加入购物车</span>
      </div>
      <div class="goods-footer-item buy">
        <span @click="purchase('cart')">立即购买</span>
      </div>
    </div>
  </div>
</template>
<script>
import { getInfo, getthum, getShopCar } from '@/api'
import { Swiper, XButton } from 'vux'
import myHeader from '@/components/myHeader'

export default {
  components: {
    Swiper,
    XButton,
    myHeader
  },
  data () {
    return {
      // 获取路由地址上的id
      id: this.$route.params.id,
      // 存放商品价格及描述对象
      goodsInfo: {},
      // 存放轮播图片的数组
      goodsSwipe: [],
      // 购物车数据
      cartList: []

    }
  },
  created () {
    this.cartList = JSON.parse(localStorage.getItem('cartList') || '[]')
    // 1.2 调用初始化商品价格及描述方法
    this.initGoods()
    // 2.2 调用初始化轮播图方法
    this.initSwiper()
    // 4.2 添加购物车方法
    // this.addCart()
  },
  computed: {
    cartNum () {
      let num = 0
      this.cartList.forEach(item => {
        num += item.num
      })
      return num
    }
  },
  methods: {
    // 1.1 初始化商品价格及描述方法
    initGoods () {
      getInfo(this.id).then(res => {
        console.log(res)
        this.goodsInfo = res.message[0]
      })
    },
    // 2.1 初始化轮播图方法
    initSwiper () {
      getthum(this.id).then(res => {
        console.log(res)
        let obj = res.message
        let key = 'img'
        obj.forEach(item => {
          item[key] = item['src']
          delete item['src']
        })
        this.goodsSwipe = obj
      })
    },
    // 3.1 跳转到图文介绍和商品评论
    JumpTo (pathName) {
      this.$router.push({ name: pathName, params: { id: this.$route.params.id } })
    },
    // 4.1 加入购物车
    addCart () {
      getShopCar(this.id).then(res => {
        console.log(res)
        if (res.status === 0) {
          // 存放购物车所需要的字段
          let tempObj = {
            id: this.id,
            price: res.message[0].sell_price,
            title: res.message[0].title,
            img: res.message[0].thumb_path,
            selectState: true,
            num: 1
          }
          if (this.cartList.length === 0) {
            console.log(tempObj)
            this.cartList.push(tempObj)
            console.log(1)
          } else {
            console.log(2)
            // 利用findIndex方法，判断是否存在当前商品id所对应的索引值
            let idx = this.cartList.findIndex(item => item.id === this.id)
            // 判断是否存在当前商品id所对应的索引值
            if (idx === -1) {
              // 如果不存在，直接把存好的对象字段push进去
              this.cartList.push(tempObj)
              // this.cartList = cartList
            } else {
              console.log(3)
              // 否则就让商品数量加一
              this.cartList[idx].num++
              // this.cartList = cartList
            }
          }
          localStorage.setItem('cartList', JSON.stringify(this.cartList))
        // console.log(idx)
        }
      })
    },
    // 5.1
    purchase (pathName) {
      this.$router.push({ name: pathName })
    }
  }
}
</script>

<style lang="less" scoped>
.goods-detail {
  margin-bottom: 50px;
  margin-top: 45px;
  // padding: 0 10px;
}
.swiperbox {
  height: 300px;
  img {
    width: 100%;
  }
}

.goods-title {
  font-size: 16px;
  font-weight: bold;
  margin: 10px 0;
}
.goods-price {
  font-size: 14px;
  .market-price {
    text-decoration: line-through;
  }
  .sell-price {
    color: #e4393c;
  }
}

.goods-info {
  font-size: 14px;
   .goods-desc {
    margin-top: 10px;
    font-size: 16px;
    font-weight: bold;
  }
}

.goods-footer {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 50px;
  width: 100%;
  border-top: 1px solid #e7e7e7;
  background-color: #fff;
  .goods-footer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .contact, .cart {
    width: 40%;
    font-size: 12px;
    position: relative;
  }
  .badge {
    position: absolute;
    top: 3%;
    left: 50%;
    width: 14px;
    height: 14px;
    border-radius: 7px;
    background-color: #e4393c;
    text-align: center;
    line-height: 14px;
    color: white;
  }
  .add, .buy {
    width: 60%;
    color: white;
    &>span {
      font-size: 20px;
    }
  }
  .add {
    background-color: #ff9600;
  }
  .buy {
    background-color: #e4393c;
  }
}

</style>
